    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挂号</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css" />
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .imgbox {
        position: absolute;
        border-radius: 50%;
        overflow: hidden;
        height: 80px;
        width: 80px;
        /*border: 1px solid;*/
        display: inline-block;
    }

    .infobox {
        position: absolute;
        left: 85px;
        height: 70px;
        width: 152px;
        /*border: 1px solid;*/
        display: inline-block;
    }

    .contextbox {
        position: relative;
        margin: 20px 0px auto 12px;
    }

    .addbtn {
        margin-top: 26px;
    }

    #table_head{
        width: 1035px;
        text-align: center;
        height: 70px;
        line-height: 70px;
        font-family: Microsoft YaHei;
        margin:10px auto 10px auto;
        background-color: #edeaea;
    }
    #tscheduleList{
        width: 1035px;
        margin:10px auto 10px auto;
    }
    .el-calendar-table tr td:first-child {
        border-left: 1px solid #545C64;
    }
    .el-calendar-table tr:first-child td {
        border-top: 1px solid #545C64;
    }
    .el-calendar-table td {
        border-bottom: 1px solid #545C64;
        border-right: 1px solid #545C64;
    }
    .el-table__row{
        height: 115px;
    }
    .price_infobox{
        position: relative;
        margin: 18px;
    }
    #head{
        height: 100px;
        width: 100%;
        background-color: #01a4a2;
        line-height: 100px;
        text-align: center;
    }
</style>
<body>

<div id="app">
    <div id="head">
        <h1>AAA大医院网上挂号平台</h1>
    </div>
    <h1 v-text="sectionName" style="text-align: center"></h1>
    <!--表头-->
    <table class="el-calendar-table el-table__body" cellpadding="0" cellspacing="0" id="table_head">
        <thead>
        <tr>
            <td style="width: 240px;height: 30px;" class="el-table__cell">医生列表</td>
            <td v-for="(sdate,i) in shceDate" class="el-table__cell"><b>{{sdate}}</b></td>
        </tr>
        </thead>
    </table>
    <!--表数据-->
    <div id="tscheduleList">
        <div v-for="c in scheInfo">
            <table class="el-calendar-table el-table__body" cellpadding="0" cellspacing="0">
                <tbody>
                <tr class="el-table__row">
                    <td v-for="(p,i) in c" v-if="i==0" style="width: 240px;height: 90px;" class="el-table__cell">
                        <div class="contextbox">
                            <div class="imgbox">
                                <img :src="p.adminUrl" width="80px">
                            </div>
                            <div class="infobox">
                                <p style="margin: 21px auto 14px;"><b style="color:rgb(1, 164, 162) ">{{p.name}}</b></p>
                                {{p.adminDesc}}
                            </div>
                        </div>
                    </td>
                    <td v-else style="text-align: center;" class="el-table__cell">
                        <div v-if="p.schedulingId == null">
                        </div>
                        <div v-else>
                            <div v-if="p.num==0" style="color: #F56C6C; font-weight: bold" class="price_infobox">
                                ￥<span v-html="p.price"></span>
                                <br><br>
                                预约人数已满
                            </div>
                            <div  v-else style="color: #01A4A2; font-weight: bold"  @click="appointment(p.schedulingId,p.adminId,p.date,p.sectionId,p.price)" class="price_infobox">

                                ￥<span v-html="p.price"></span>
                                <br>
                                <br>
                                可预约人数<span v-html="p.num"></span>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</div>



</body>
<script>
    var url = window.location.href;
    var sectionid = url.split("&")[0].split("=")[1];
    console.log(sectionid)
    var sectionName = url.split("&")[1].split("=")[1];


    var app = new Vue({
        el: "#app",

        data: {
            //科室名称
            sectionName:"",
            //动态生成的日期
            shceDate: [],

            //医生和排班信息
            scheInfo: {},

            //数据总量
            total: 0,
            //    当前页面显示的条数
            pageSize: 5,
            //    当前显示的页码
            currentPage: 1,

        },

        created() {
            this.initDate();
            this.initTable();
            this.sectionName=decodeURI(sectionName);
        },

        methods: {


            appointment(schedulingId,adminId,date,sectionId,price){
                console.log(schedulingId,adminId,date,sectionId);
                window.location.href="/tianjiayuyuexinxi.html?schedulingId="+schedulingId+"&adminId="+adminId+"&date="+date+"&sectionId="+sectionId+"&price="+price;

            },

            //初始化日期
            initDate() {
                axios.get("/schedulingDate/schedulingDate", ).then(res => {
                    this.shceDate = res.data.data;
                })
            },
            //初始化列表
            initTable() {
                axios.get("/scheduling/scheduling?sectionid=" + sectionid + "&currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(res => {

                    this.scheInfo = res.data.data.data;
                    this.total=res.data.data.total;


                })
            },
            //分页显示
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },

            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
        }
    })
</script>
</html>
